<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>canvas清晰度</title>
    <style>
        canvas{
            /* 样式尺寸 */
            width: 200px;
            width: 200px;
            background:#000;
        }
    </style>
</head>
<body>
    <canvas></canvas>
    <script>
        // 原始尺寸 = 样式尺寸*缩放倍率
        const cvs = document.querySelector('canvas');
        const ctx = cvs.getContext('2d');
        function draw(){
            // 原始尺寸
            cvs.width=400 * devicePixelRatio;
            cvs.height=400 * devicePixelRatio ;
            ctx.clearRect(0,0,cvs.width,cvs.height);
            // 画图
            ctx.beginPath();
            const r = 80* devicePixelRatio;
            ctx.arc(cvs.width/2,cvs.height/2,r,0,2*Math.PI);
            ctx.strokeStyle='#fff';
            ctx.lineWidth = 10* devicePixelRatio;
            ctx.stroke();
        }
        draw();
        window.addEventListener('resize',draw)
    </script>
</body>
</html>